<template>
	<div id="choose-ability">
		<div v-show="module==0">
			<div class="title" v-show="chart_all">主要投资板块及股票</div>
			<div class="title" v-show="!chart_all">暂无投资板块及股票</div>
			<div class="empty" v-show="!chart_all">
				<img src="~@/assets/images/profitNone.png">
			</div>
			<div class="chartContainer" v-show="chart_1">
				<div class="chartTitle">
					<img src="~@/assets/images/yuan1-2x.png">
					<span v-text="message.type_1.name+'板块(市值占比'+message.type_1.quantity+'%)'"></span>
				</div>
				<div ref="myChart1" style="width:auto; height:3.2rem;" class="chart"></div>
				<div class="total">共有<span class="textBlue" v-text="message.defeat_1"></span>支股票行情涨跌幅超过对应板块</div>
			</div>
			<div class="chartContainer" v-show="chart_2">
				<div class="chartTitle">
					<img src="~@/assets/images/yuan2-2x.png">
					<span v-text="message.type_2.name+'板块(市值占比'+message.type_2.quantity+'%)'"></span>
				</div>
				<div ref="myChart2" style="width:auto; height:3.2rem;" class="chart"></div>
				<div class="total">共有<span class="textBlue" v-text="message.defeat_2"></span>支股票行情涨跌幅超过对应板块</div>
			</div>
			<div class="chartContainer" v-show="chart_3">
				<div class="chartTitle">
					<img src="~@/assets/images/yuan3-2x.png">
					<span v-text="message.type_3.name+'板块(市值占比'+message.type_3.quantity+'%)'"></span>
				</div>
				<div ref="myChart3" style="width:auto; height:3.2rem;" class="chart"></div>
				<div class="total">共有<span class="textBlue" v-text="message.defeat_3"></span>支股票行情涨跌幅超过对应板块</div>
			</div>
			<div class="trophy">
				<img src="~@/assets/images/trophy2x.png">
				<div>本月，您的选股能力得分为<span class="text-red" v-text="message.score"></span>分</div>
			</div>
			<div class="star">
				<img src="~@/assets/images/star.png">
				<div v-text="message.slogon"></div>
				<img src="~@/assets/images/star.png">
			</div>
		</div>
		<return-error v-show="module==1"></return-error>
		<return-empty v-show="module==2"></return-empty>
	</div>
</template>
<script>
	import echarts from 'echarts/lib/echarts'
	import 'echarts/lib/chart/bar'
	import 'echarts/lib/component/tooltip'
	import 'echarts/lib/component/grid'
	import RemoteDAO from '@/common/remoteDAO'

	const option={
		tooltip : {
	    	show:true,
	        trigger: 'axis',
	        axisPointer : {
	            type : 'shadow',
	            axis:'y',
	            label:{
	            	formatter:'{value}'
	            },
	            shadowStyle:{
	            	color:'#309fea',
	            	opacity:0.1
	            }
	        },
	        formatter:function(params,ticket,callback){
	        	return params[0].name
	        },
	        backgroundColor:'rgba(0,0,0,0.4)'
	    },
	    grid: {
	        left: '4%',
	        right: '4%',
	        bottom: '0',
	        containLabel: true,
	        height:'100%'
	    },
	    xAxis : [
	        {
	            type : 'value',
	            axisLine:{
	                lineStyle:{
	                    color:'#c9daeb',
	                    type:'solid'
	                }
	            },
	            axisTick:{show:false},
	            axisLabel:{
	            	formatter:'{value}%',
	            	textStyle: {
						color: '#999'
					}
	            },
	            splitLine:{
	            	lineStyle:{
	            		color:'#c9daeb',
	            		type:'dotted'
	            	}
	            }
	        }
	    ],
	    yAxis : [
	        {
	            type : 'category',
	            axisTick : {show: false},
	            axisLabel:{
	            	textStyle:{
	            		color:'#999'
	            	}
	            },
	            axisLine:{
	                show:false
	            },
	            position:'right'
	        },
	        {
	        	position:'left',
	        	axisTick : {show: false},
	        	axisLine:{
	        		show:false
	        	},
	        	axisLabel:{
	        		textStyle:{
	        			color:'rgba(255,255,255,0)'
	        		}
	        	}
	        }
	    ],
	    series : [
	        {
	            type:'bar',
	            label: {
	                normal: {
	                    show: false
	                }
	            },
	            itemStyle:{
	                normal:{
	                    color:function(para){
	                    	if(para.data>=0){
	                    		return '#eb333b';
	                    	}
	                    	else{
	                    		return '#1aae52';
	                    	}
	                    }
	                }
	            },
	            barWidth:'10'
	        }
	    ]
	}

	let dataOption1={
		yAxis:[
			{data:[]},
			{data:[]}
		],
		series:[
			{data:[]}
		]
	}

	let dataOption2={
		yAxis:[
			{data:[]},
			{data:[]}
		],
		series:[
			{data:[]}
		]
	}

	let dataOption3={
		yAxis:[
			{data:[]},
			{data:[]}
		],
		series:[
			{data:[]}
		]
	}

	export default{
		props:['time','monthstatus'],
		data () {
			return {
				module:0,
				chart_1:true,
				chart_2:true,
				chart_3:true,
				chart_all:true,
				myChart1:null,
				myChart2:null,
				myChart3:null,
				message:{
					type_1:{
						name:'',
						quantity:''
					},
					type_2:{
						name:'',
						quantity:''
					},
					type_3:{
						name:'',
						quantity:''
					},
					score:'',
					slogon:'',
					defeat_1:0,
					defeat_2:0,
					defeat_3:0
				}
			}
		},
		mounted () {
			this.myChart1=echarts.init(this.$refs.myChart1)
			this.myChart2=echarts.init(this.$refs.myChart2)
			this.myChart3=echarts.init(this.$refs.myChart3)

			this.myChart1.setOption(option)
			this.myChart2.setOption(option)
			this.myChart3.setOption(option)

			this.initEvent()
		},
		beforeDestroy(){
			echarts.dispose(this.myChart1);
			echarts.dispose(this.myChart2);
			echarts.dispose(this.myChart3);
		},
		watch:{
			time:function(){
				this.initEvent();
			},
			monthstatus:function(){
				this.initEvent();
			}
		},
		methods:{
			graph(){
				this.myChart1.setOption(dataOption1);
				this.myChart2.setOption(dataOption2);
				this.myChart3.setOption(dataOption3);
			},
			initEvent(){
				this.module=0
				this.chart_1=true
				this.chart_2=true
				this.chart_3=true
				this.chart_all=true
				var self=this;
				var obj={"pagenum": "30","recent": this.time};
				RemoteDAO.callZL13100014(obj,self.ZL13100014);
			},
			ZL13100014(result){
				if(result.error=='1'){
					this.module=1
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.module=2
					}
					else{
						let source=specData[0]._source;
						if(source.sw_industry_name_top1==''){
							this.chart_1=false;
						}
						if(source.sw_industry_name_top2==''){
							this.chart_2=false;
						}
						if(source.sw_industry_name_top3==''){
							this.chart_3=false;
						}
						if(source.sw_industry_name_top1=='' && source.sw_industry_name_top2=='' && source.sw_industry_name_top3==''){
							this.chart_all=false;
						}
						this.message.type_1.name=source.sw_industry_name_top1;
						this.message.type_1.quantity=source.sw_industry_rate_top1;
						let arr_1_y=[source.stock_name_top1_3+source.stock_ascend_top1_3+'%',source.stock_name_top1_2+source.stock_ascend_top1_2+'%',source.stock_name_top1_1+source.stock_ascend_top1_1+'%',source.sw_industry_name_top1+source.sw_industry_ascend_top1+'%'];
						let newArr_1_y=[];
						arr_1_y.forEach(value=>{
							if(value!='0%'){
								newArr_1_y.push(value);
							}
						});
						dataOption1.yAxis[0].data=newArr_1_y;
						let arr_1_series=[source.stock_ascend_top1_3,source.stock_ascend_top1_2,source.stock_ascend_top1_1,source.sw_industry_ascend_top1];
						let newArr_1_series=arr_1_series.splice(arr_1_series.length-newArr_1_y.length,newArr_1_y.length);
						dataOption1.series[0].data=newArr_1_series;
						let arr1=[source.stock_ascend_top1_1,source.stock_ascend_top1_2,source.stock_ascend_top1_3];
						arr1.length=newArr_1_y.length==0?newArr_1_y.length:newArr_1_y.length-1;
						let num1=0;
						arr1.forEach(value=>{
							if(value>source.sw_industry_ascend_top1){
								num1++;
							}
						});
						this.message.defeat_1=num1;

						this.message.type_2.name=source.sw_industry_name_top2;
						this.message.type_2.quantity=source.sw_industry_rate_top2;
						let arr_2_y=[source.stock_name_top2_3+source.stock_ascend_top2_3+'%',source.stock_name_top2_2+source.stock_ascend_top2_2+'%',source.stock_name_top2_1+source.stock_ascend_top2_1+'%',source.sw_industry_name_top2+source.sw_industry_ascend_top2+'%'];
						let newArr_2_y=[];
						arr_2_y.forEach(value=>{
							if(value!='0%'){
								newArr_2_y.push(value);
							}
						})
						dataOption2.yAxis[0].data=newArr_2_y;
						let arr_2_series=[source.stock_ascend_top2_3,source.stock_ascend_top2_2,source.stock_ascend_top2_1,source.sw_industry_ascend_top2];
						let newArr_2_series=arr_2_series.splice(arr_2_series.length-newArr_2_y.length,newArr_2_y.length);
						dataOption2.series[0].data=newArr_2_series;
						let arr2=[source.stock_ascend_top2_1,source.stock_ascend_top2_2,source.stock_ascend_top2_3];
						arr2.length=newArr_2_y.length==0?newArr_2_y.length:newArr_2_y.length-1;
						let num2=0;
						arr2.forEach(value=>{
							if(value>source.sw_industry_ascend_top2){
								num2++;
							}
						});
						this.message.defeat_2=num2;

						this.message.type_3.name=source.sw_industry_name_top3;
						this.message.type_3.quantity=source.sw_industry_rate_top3;
						let arr_3_y=[source.stock_name_top3_3+source.stock_ascend_top3_3+'%',source.stock_name_top3_2+source.stock_ascend_top3_2+'%',source.stock_name_top3_1+source.stock_ascend_top3_1+'%',source.sw_industry_name_top3+source.sw_industry_ascend_top3+'%']
						let newArr_3_y=[];
						arr_3_y.forEach(value=>{
							if(value!='0%'){
								newArr_3_y.push(value);
							}
						})
						dataOption3.yAxis[0].data=newArr_3_y;
						let arr_3_series=[source.stock_ascend_top3_3,source.stock_ascend_top3_2,source.stock_ascend_top3_1,source.sw_industry_ascend_top3];
						let newArr_3_series=arr_3_series.splice(arr_3_series.length-newArr_3_y.length,newArr_3_y.length);
						dataOption3.series[0].data=newArr_3_series;
						let arr3=[source.stock_ascend_top3_1,source.stock_ascend_top3_2,source.stock_ascend_top3_3];
						arr3.length=newArr_3_y.length==0?newArr_3_y.length:newArr_3_y.length-1;
						let num3=0;
						arr3.forEach(value=>{
							if(value>source.sw_industry_ascend_top3){
								num3++;
							}
						});
						this.message.defeat_3=num3;

						this.message.score=source.select_index;
						if(this.message.score<60){
							this.message.slogon='选股能力还有很大进步空间呢！';
						}
						else if(this.message.score<80){
							this.message.slogon='选股能力表现良好，还需努力呀！';
						}
						else{
							this.message.slogon='选股能力优异，做的不错哦！';
						}

						this.graph();
					}
				}
			}
		}
	}
</script>
<style scoped>
	#choose-ability{
		font-size: 24px;
		color: #999;
		margin-bottom: 50px;
	}
	.title{
		margin-top:30px;
		height: 40px;
		font-size: 28px;
		text-align: center;
	}
	.chartTitle{
		height: 28px;
		display: flex;
		margin-top: 30px;
		justify-content: center;
		align-items: center;
	}
	.chartTitle img{
		height: 28px;
	}
	.chartTitle span{
		padding-left: 10px;
	}
	.labels{
		margin-top: 20px;
		height: 28px;
		line-height: 28px;
		display: flex;
		font-size: 20px;
		justify-content: center;
	}
	.label{
		padding: 0 50px;
	}
	.textGreen{
		color: #1aae52;
	}
	.textRed{
		color: #eb333b;
	}
	.chart{
		margin-top: 10px;
	}
	.total{
		margin-top: 20px;
		height: 30px;
		text-align: center;
	}
	.textBlue{
		color: #4aa1ff;
	}
	.chartContainer{
		margin-top: 40px;
	}
	.trophy{
		margin-top: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.trophy img{
		height: 40px;
	}
	.trophy div{
		margin-left: 20px;
		font-size: 28px;
	}
	.star{
		margin-top: 20px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.star img{
		height: 20px;
	}
	.star div{
		font-size: 20px;
		padding: 0 8px;
	}
	.text-red{
		color: #e31a2e;
	}
	.noData{
		height: 100px;
		font-size: 24px;
		color: #999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.noData img{
		height: 28px;
	}
	.noData div{
		margin-left: 10px;
	}
	.empty{
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.empty img{
		height: 320px;
	}
</style>
